<template>
  <div class="fold-nav">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      active-text-color="#02a13f"
    >
      <a class="el-menu-item" target="_blank" href="http://erleizi.com/">
        河图
      </a>
      <router-link
        class="el-menu-item"
        active-class="isActive"
        to="/main/recommend"
        index="/main/recommend"
        >推荐</router-link
      >
      <router-link
        class="el-menu-item"
        active-class="isActive"
        to="/main/sheet"
        index="/main/sheet"
        >歌单</router-link
      >
      <router-link
        class="el-menu-item"
        active-class="isActive"
        to="/main/rank"
        index="/main/rank"
        >排行</router-link
      >

      <router-link
        class="el-menu-item"
        active-class="isActive"
        to="/main/djradio"
        index="/main/djradio"
        >电台</router-link
      >
    </el-menu>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'

export default defineComponent({
  setup() {
    /* 路由匹配 */
    const route = useRoute()
    const path = route.path
    const activeIndex = ref(path)

    return {
      activeIndex
    }
  }
})
</script>

<style scoped lang="less">
.fold-nav {
  position: fixed;
  width: 100%;
  z-index: 10;
  .el-menu-demo {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    .el-menu-item {
      flex: 1;
      text-align: center;
      font-size: 16px;

      .hetu {
        color: rgb(0, 0, 0);
      }
    }
    .isActive {
      color: #02a13f;
      border-bottom: 1px solid #02a13f;
    }
  }
}
</style>
